<template>
	<view class="gradForm">
		<!-- 分级头,显示步骤条 -->
		<view class="gradForm_top">
			<uni-steps :options="stepOptions" :active="stepActive" v-if="stepOptions.length > 1"></uni-steps>
		</view>
		<view class="gradForm_main">
			<dil-Form
				:formId="item.formId"
				ref="form"
				v-model="form"
				class="dilForm"
				labelPosition="left"
				labelWidth="90px"
				v-show="stepActive === index"
				v-for="(item, index) in formList"
				:key="index"
			></dil-Form>
		</view>
		<view class="gradForm_floot">
			<button @click="cancel" v-if="stepActive == 0" class="previous">取消</button>
			<button @click="previous" v-if="stepActive > 0" class="previous">上一步</button>
			<button @click="next" v-if="stepActive < stepOptions.length - 1" class="next">下一步</button>
			<button @click="submitDebounce" v-if="stepActive == stepOptions.length - 1" class="next">提交</button>
		</view>
	</view>
</template>

<script>
import { debounce } from '@/utils/utils.js';
export default {
	name: 'dil-grad-form',
	data() {
		return {
			//绑定表单数据
			form: {}
		};
	},
	props: {
		stepOptions: {
			default() {
				return [];
			}
		},
		stepActive: {
			require: true,
			default: 0
		},
		formList: {
			default() {
				return [];
			},
			require: true
		},
		formValue: {
			default() {
				return {};
			},
			require: true
		}
	},
	mounted() {
		this.form = JSON.parse(JSON.stringify(this.formValue)) || {};
		this.submitDebounce = debounce(() => {
			this.submit();
		}, 500);
	},
	watch: {
		form: {
			handler(newVal, oldVal) {
				this.$emit('update:formValue', newVal);
			},
			deep: true,
			immediate: true
		}
		// formValue(newValue, oldValue) {
		// 	console.log('oldValue: ', oldValue);
		// 	console.log('newValue: ', newValue);
		// 	this.form = newValue || {};
		// },
		// deep: true
	},
	methods: {
		cancel() {
			this.$emit('cancelForm', JSON.parse(JSON.stringify(this.form)));
		},
		previous() {
			let index;
			if (this.stepActive > 0) {
				index = this.stepActive - 1;
				this.$emit('previous', index, JSON.parse(JSON.stringify(this.form)));
			}
		},
		next() {
			let index;
			this.$refs['form'][this.stepActive].validateForm((data) => {
				if (data.flag) {
					if (this.stepActive < this.stepOptions.length - 1) {
						index = this.stepActive + 1;
						this.$emit('next', index, JSON.parse(JSON.stringify(this.form)));
					}
				} else {
					console.log('没写完: ', '');
				}
			});
		},
		submit() {
			this.$refs['form'][this.stepActive].validateForm((data) => {
				if (data.flag) {
					this.$emit('submitGradForm', JSON.parse(JSON.stringify(this.form)));
				} else {
					console.log('没写完: ', '');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.gradForm {
	width: 100vw;
	height: 100%;
	background-color: #fff;
	margin-top: 20rpx;

	.gradForm_top {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}
	.gradForm_main {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
		margin-left: 20rpx;
		.dilForm {
			height: 100%;
		}
	}

	.gradForm_floot {
		display: flex;
		justify-content: center;
		align-items: center;
		.previous {
			color: #000;
			background-color: #fff;
			border-color: #fff;
			width: 180rpx;
			border-radius: 10rpx;
		}
		.next {
			color: #000;
			background-color: #00aded;
			border-color: #00aded;
			width: 180rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
